<!-- <SubmitButton round :shadow="false" color="#78e26c" value="报名比赛" disabled /> -->
<!-- round:使圆角； :shadow="false"去除阴影，默认为true；size="small"小型 默认为normal color=""：设置颜色  value=""设置字符值 disabled：设置为禁用 -->
<template>
    <el-button 
    :color="props.color" 
    :disabled="props.disabled"
    :class="[
        {'round': props.round},
        {'shadow-btn': props.shadow},
        {'disabled': props.disabled},
        props.size
      ]">
        {{ props.value }}
    </el-button>
</template>
<script setup>
// 设置props各自的type
const props = defineProps({
    value: {
        type: String,
        default: "提交",
    },
    color: {
        type: String,
        default: "#78e26c",
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    round: {
        type: Boolean,
        default: false,
    },
    shadow: {
        type: Boolean,
        default: true,
    },
    size: {
        type: String,
        default: "normal",
    },
});


</script>
<style scoped lang="scss">
.el-button {
    width: 100px;
    height: 40px;
    font-weight: bold;
    color: white;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;

    &:hover {
        cursor: pointer;
        color: #2c3e50;
    }
}
.shadow-btn:hover {
    box-shadow: 0 0 4px #afafaf;
}
.disabled {
    color: #666;
    
    &:hover {
        color: #666;
        box-shadow: none;
        cursor: not-allowed;
    }
}
.round {
    border-radius: 9999px;
}
.small {
    height: 30px;
    width: 70px;
    font-size: 12px;
    font-weight: normal;
    border-radius: 5px;
}
</style>